//用于存储回退的栈
function stack(){ 
	if(this.top==undefined){ 
		//初始化堆栈的顶部指针和数据存放域 
		this.top=0; 
		this.unit=new Array(); 
	} 
	this.push=function(pushvalue){ 
		//定义压入堆栈的方法 
		this.unit[this.top]=pushvalue; 
		this.top+=1; 
	} 
	this.readAllElements=function(){ 
		//定义读取所有数据的方法 
		if(this.top==0){ 
			alert("当前栈空，无法读取数据"); 
			return(""); 
		} 
		var count=0; 
		var outStr=""; 
		for(count=0;count<this.top;count++){ 
			outStr+=this.unit[count]+","; 
		} 
		return(outStr); 
	} 
	this.pop=function(){ 
		//定义弹出堆栈的方法 
		if(this.top==0){ 
			alert("当前栈空，无法弹出数据"); 
			return(""); 
		} 
		var popTo=this.unit[this.top-1]; 
		this.top--; 
		return(popTo); 
		/* 从堆栈弹出数据，顶部指针减一，不过这里没有做到资源的释放，
		也就是说数据仍然存在于this.unit的数组中，只不过无法访问罢了。
		目前 我也没想到好的办法解决。*/ 
	}
}

var CanvasUtil = function (){
	
	//默认配置
//	var canvas = document.getElementById('myCanvas');
//	var ctx = canvas.getContext('2d');
	
	var canvas,ctx;
	//加载原始图片
	var img = new Image();
	var imgName = '001.jpg';
	var imgSrc = '001.jpg';
	//马赛克图片
	var imgMT = new Image();
	imgMT.src = "/admin/templates/mark.png";
	
//	img.src = imgSrc;
//	img.onload = function(){
//		ctx.drawImage(img,0,0,canvas.width,canvas.height);
//	}
	
	
	/**
	 * 初始化及更新
	 * (canvas.id,图片Src,图片下载名)
	 */
	this.init = function(canvasId,Src,Name){
		canvas = document.getElementById(canvasId);
		ctx = canvas.getContext('2d');
		img.src = Src;
		imgSrc = Src;
		imgName = Name;
		canvas.width = img.width;
		canvas.height = img.height;
		ctx.drawImage(img,0,0,canvas.width,canvas.height);
		//鼠标事件
		//鼠标按下
		canvas.onmousedown = function(e){
			isMousedown = true;
			saveDrawingSurface();
//			e.preventDefault();
			startXY = windowToCanvas(e.clientX,e.clientY);
		}
		//鼠标移动
		canvas.onmousemove = function(e){
			if(isMousedown){
				retrueDrawingSurface();
//				e.preventDefault();
				moveXY = windowToCanvas(e.clientX,e.clientY);
				moveRect(startXY.x,startXY.y,moveXY.x - startXY.x,moveXY.y - startXY.y);
			}
		}
		//鼠标抬起
		canvas.onmouseup = function(e){
			isMousedown = false;
//			e.preventDefault();
			endXY = windowToCanvas(e.clientX,e.clientY);
			endRect(startXY.x,startXY.y,endXY.x - startXY.x,endXY.y - startXY.y);
		}
	}
	
	
	
	//存储用的栈
	var stackImg = new Array();
//	var stackImg = new stack();
	//图片暂存变量
	var drawingSurfaceImageData; 
	//保存当前绘图表面数据
	function saveDrawingSurface(){
		drawingSurfaceImageData = ctx.getImageData(0,0,canvas.width,canvas.height);
		//入栈
		stackImg.push(drawingSurfaceImageData);
	}
	//还原当前绘图表面 用于回退按钮
	function restoreDrawingSurface(){
		if(stackImg.length > 0){
			drawingSurfaceImageData = stackImg.pop();
			ctx.putImageData(drawingSurfaceImageData,0,0);
		}
	}

	//回退到前一个绘图表面 用于鼠标拖拽时的绘图使用
	function retrueDrawingSurface(){
		ctx.putImageData(drawingSurfaceImageData,0,0);
	}
	
	var startXY;//鼠标按下时坐标
	var moveXY;//鼠标移动时坐标
	var endXY;//鼠标抬起时坐标
	var isMousedown = false;//鼠标是否是按下状态
	//将窗口坐标转换为Canvas坐标
	function windowToCanvas(x,y){   
	     var bbox = canvas.getBoundingClientRect();        
		return {   
	         x : x - bbox.left*(canvas.width/bbox.width),
	         y : y - bbox.top*(canvas.height/bbox.height)        
		};    
	}
	
	//鼠标移动时绘制矩形
	function moveRect(sX,sY,eX,eY){
		//矩形(空心)
		
		ctx.strokeRect(sX,sY,eX,eY);
	}

	//鼠标抬起时绘制填充矩形
	function endRect(sX,sY,eX,eY){
		//填充矩形
		
		var pat=ctx.createPattern(imgMT,"repeat");
		ctx.fillStyle=pat;
		ctx.fillRect(sX,sY,eX,eY);
	}
	
	/**
	 * 回退按钮方法
	 */
	this.goBack = function (){
		restoreDrawingSurface();
	}
	/**
	 * 图片保存到本地
	 */
	this.saveAsLocalImage = function () {  
		
		var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
	    save_link.href = canvas.toDataURL("image/jpeg");
	    save_link.download = imgName;
	   
	    var event = document.createEvent('MouseEvents');
	    event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
	    save_link.dispatchEvent(event);
	}  
	/**
	 * 切换图片(图片Src,图片下载名)
	 */
	this.nextImage = function (Src,Name){
		imgName = Name;
		imgSrc = Src;
		img.src = Src;
//		canvas.width = img.width;
//		canvas.height = img.height;
//		ctx.drawImage(img,0,0,canvas.width,canvas.height);	
		imgZip(1800);
		//设置最初
		saveDrawingSurface();
	}
	/**
	 * 等比例缩放，限制图片宽度最大为new_width
	 */
	function imgZip (new_width){
		var width = img.width;
	    var height = img.height;
	    var sx = 0;
	    var sy = 0;
	    var sWidth = width;
	    var sHeight = height;
	    var dWidth = width;
    	var dHeight = height;
	    if(width>new_width){
	    	dWidth=new_width;
	    	dHeight=height*new_width/width;
	    }
	    var dx = 0;
	    var dy = 0;
	    var quality = 0.92;
	    canvas.width = dWidth;
		canvas.height = dHeight;
	    ctx.drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
	}
	/**
	 * 将图片转换为Base64编码
	 */
	this.toBase64String = function (){
		var code = canvas.toDataURL("image/jpeg").replace("data:image/jpeg;base64,","");
		return code;
	}
}
/**
 * 实例化对象
 */
var canvasUtil = new CanvasUtil();


